<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/601748 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="486"/>
<h1>22-cookie</h1>
<div>
<table bgcolor="#D4DDE5" border="0">
<tr><td><b>创建时间：</b></td><td><i>2018/5/2 16:27</i></td></tr>
<tr><td><b>更新时间：</b></td><td><i>2019/9/25 11:11</i></td></tr>
<tr><td><b>作者：</b></td><td><i>18081003141@163.com</i></td></tr>
</table>
</div>
<br/>

<div>
<span><div><br clear="none"/></div><div><span style="font-size: 12pt;">通信协议</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">依照一种规则进行交流</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">浏览器  ---&gt; 服务器之间的交流   TCP协议</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">TCP是面向连接的，无论哪一方向另一方发送数据之前，都必须先在双方之间建立一条连接。在TCP/IP协议中，TCP 协议提供可靠的连接服务，连接是通过三次握手进行初始化的。</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">三次握手</span></div><div><br clear="none"/></div><div><img src="00-cookie笔记_files/三次握手.jpg" type="image/jpeg" data-filename="三次握手.jpg" style="font-size: 12pt;"/>    </div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div>       <img src="00-cookie笔记_files/三次握手.gif" type="image/gif" data-filename="三次握手.gif" width="573"/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br clear="none"/></div><div><img src="00-cookie笔记_files/四次挥手.gif" type="image/gif" data-filename="四次挥手.gif" width="640"/></div><div><br/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">HTTP（无状态的协议）</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">基于TCP协议的一种高级协议, 用于客户端和服务器直接的通信</span></div><div><span style="font-size: 12pt;">这种通信最大的问题在哪？</span></div><div><span style="font-size: 12pt;">问题就在于每次收到返回的页面后，连接都断开了。</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">这种通讯的问题就在于， 你挂了电话， 还怎么通讯？</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">比如你刚刚登陆过的账号密码， 如果你再想要登陆的话， 还要输入一遍。。。 举个简单的例子， 你逛淘宝时候每看一个商品都要重新登陆一下。。。那酸爽；</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 14pt;"><span style="font-size: 14pt; font-weight: bold;">cookie  会话跟踪技术</span></span></div><div><br clear="none"/></div><div><span style="font-size: 16px;">一个网站从打开到浏览（包括这个网站的其他子页面）到最后关闭浏览器整个过程叫一个“会话”。</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态（例如：是否登录、购物车信息、是否已下载、是否 已点赞、视频播放进度等等）。  </span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">多次请求页面，数据共享</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">cookie的存取</span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt;">document.cookie = &quot;username=zhangsan&quot;;</span></div><div><br clear="none"/></div><div><span style="font-size: 16px;">console.log(document.cookie);</span></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="color: rgb(255, 0, 0);">注意：cookie是http/https协议下的技术，大部分浏览器都不支持本地file文件对cookie操作</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">cookie的时效： expires</span></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">var d = new Date();</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">d.setxxx(); //将d设置到过期的日期</span></div><div><span style="font-size: 12pt; font-family: Monaco; color: #333333;">document.cookie = &quot;username=zhangsan;expires=&quot;+d;</span></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">cookie有哪些特点？</span></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">1 只能使用文本   (如果浏览器可以随意在客户端机器上生成文件，比如身份牌是个定时炸弹，安全问题将会变得非常严重)</span></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;"> </span></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">2 单条存储有大小限制  4KB     (文件若没有大小限制，比如身份牌的重量是140斤，挂脖子能不能累死？)</span></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">3 数量限制     （一般浏览器，限制大概在50条左右，你家的门禁卡里能存的下一部蓝光高清么？）</span></div><div><br clear="none"/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">4 读取有域名限制     不可跨域读取，只能由来自 写入cookie的 同一域名 的网页可进行读取。     简单的讲就是，谁写的cookie，谁才有权利读取     （身份牌是我发你的，当然只有我能读取，你媳妇儿的手机自动连接了邻居老王家的wifi，你知道这意味着什么 吗？)</span></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;"> </span></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">5 时效限制     每个cookie都有时效，最短的有效期是，会话级别：就是当浏览器关闭，那么cookie立即销毁     （安全学基本理论：密码锁每次打开都需要重新输入密码，输入一次密码，以后就不再验证，就没有安全可言  )        问： 信用卡为什么会有过期时间？ </span></div><div><span style="font-size: 16px;"><br/></span></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">6 路径限制   存cookie时候可以指定路径。只允许子路径读取外层cookie，外层不能读取内层</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><img src="00-cookie笔记_files/cookie.png" type="image/png" data-filename="cookie.png" style="font-family: Yu Gothic UI; font-size: 12pt;"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div>另： cookie直接存中文会造成未知错误，所以一般使用encodeURIComponent()进行编码，decodeURIComponent进行解码</div><div><br clear="none"/></div><div><br/></div><div><span style="font-size: 12pt;">练习</span></div><div><span style="font-size: 12pt;">    1、封装cookie的设置，获取和删除</span></div><div><span style="font-size: 12pt;">    2、保存用户信息</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div></span>
</div></body></html> 